iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
1
自我挑戰組

關於我的佛系SCSS開發系列 第 24

鐵人賽24天scss:meta

  • 分享至 

  • xImage
  •  

連假第一天外出,中午吃完完休息過後第一件還是鐵人賽,這時候有點煩惱開始要寫啥了真的有點沒梗,一開始以為還有蠻多東西可以寫的,不過真的慢慢沒梗難道要講一些比較常說的的用法,來湊天數(X,好拉今天快速進入到今天要說的meta的範例

//編譯前
// dark-theme/_code.scss
$border-contrast: false !default;

code {
  background-color: #6b717f;
  color: #d2e1dd;
  @if $border-contrast {
    border-color: #dadbdf;
  }
}

@use "sass:meta";

body.dark {
  @include meta.load-css("dark-theme/code",
      $with: ("border-contrast": true));
}

//編譯後

body.dark code {
  background-color: #6b717f;
  color: #d2e1dd;ˋㄍ
  border-color: #dadbdf;
}

ˇ
官網的範例
中文翻譯
今天這個東西,目前我也是感受不到便利性存在一個用法,有點像動態加入其他的地方算式也可以自訂自己要參數去動態編譯,由於自己的英文很破默默點開google翻譯也是不知道官網所要表述的意思是什麼,然後乖乖去查其他文件找到一個有中文說明的,點開進去一看還是不知道這想表達啥意思,看來今天這個meta真的要比較後面確定像@use這些用法開始慢慢普遍,才有機會知道這個用法優勢或是哪個地方設計可能會很需要,不然已官網第一個例子我個人想法就是可以控制其他地方預設好的選項,讓他可以做出不同條件顯示,希望如果有人有看到一些meta說明介紹文章可以分享一下,好拉今天又是騙過一天囉,晚點繼續苦惱明天主題orz


上一篇
鐵人賽23天mixin-position設定
下一篇
鐵人賽25天function
系列文
關於我的佛系SCSS開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言